<template>
  <div class="recommend-follow-wrapper">
    <div class="title clearfix">
      <span>推荐关注</span>
      <span class="change-batch">
        <svg></svg>
        换一批
      </span>
    </div>

    <div class="list" v-for="item in 8" :key="item">
      <el-card class="list-item user-mini-card">
        <el-avatar :size="50" :src="circleUrl" />
        <div class="text-line">
          <span class="name">
            <span>这是一个标题</span>
          </span>
        </div>
        <el-button class="follow-btn default"><el-icon><Plus /></el-icon>关注</el-button>
      </el-card>
    </div>
  </div>
</template>

<script lang="ts">
import {defineComponent} from "vue";

export default defineComponent({
  name: "attention",
});
</script>

<script setup lang="ts">

</script>

<style scoped lang="scss">
  .recommend-follow-wrapper{
    width: 1200px;
    margin: 0 auto 20px;
    .title{
      color: #b1b1b1;
      font-size: 14px;
      padding: 18px 0;
      height: 52px;
      .change-batch{
        float: right;
      }
    }
    .list{
      -webkit-box-pack: start;
      justify-content: flex-start;
      background: #f5f7f9;
      margin-right: 20px;
      margin-bottom: 20px;
      flex-flow: nowrap;
      .list-item{
        text-align: center;
        background: #fff;
        color: #7d8090;
        font-size: 14px;
        width: 142px;
        height: 160px;
        padding: 16px 12px;
        .text-line{
          .name{
            cursor: pointer;
            display: inline-block;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            max-width: 90px;
          }
        }

      }
    }
  }
</style>
